<template>
  <BoxSkin class="tabbar" type="top">
    <template v-for="item in tabbar" :key="item.path">
      <router-link :to="item.path" fz-16 text-color-primary>
        <span>{{ item.text }}</span>
      </router-link>
    </template>
  </BoxSkin>
</template>

<script setup>
import BoxSkin from "@/components/box-skin/BoxSkin.vue";
defineProps({
  tabbar: {
    type: Array,
    default: () => [],
  },
});
</script>

<style scoped lang="scss">
@include b(tabbar) {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
}
</style>
